<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in list" :key="item.id">
        <!-- 图片 -->
        <div class="col-item">
          <i
            class="iconfont"
            :class="item.icon"
            :style="{ color: item.color }"
          ></i>
        </div>
        <!-- 数据和标题 -->
        <div class="right-box">
          <h3>{{ item.title }}</h3>
          <p>{{ item.count }}</p>
        </div>
      </el-col>
    </el-row>
    <div class="content">
      <div ref="box" style="width:70%;height:350px;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { dashData } from '@/api/dash.js'
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          title: '总订单',
          icon: 'icon-wenjian',
          color: '#1296db',
          count: '',
          name: 'totalOrder'
        },
        {
          id: 2,
          title: '总销售额',
          icon: 'icon-Dollar',
          color: '#d4237a',
          count: '',
          name: 'totalAmount'
        },
        {
          id: 3,
          title: '今日订单',
          icon: 'icon-icon-',
          count: '',
          color: '#1296db',
          name: 'todayOrder'
        },
        {
          id: 4,
          title: '今日销售额',
          icon: 'icon-renminbi',
          count: '',
          color: '#1afa29',
          name: 'totayAmount'
        }
      ],
      datas: {}
    }
  },
  created() {
    this.getdata()
  },
  methods: {
    getline() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.box)

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '数据统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销售额', '总订单']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '销售额',
            type: 'line',
            stack: '总量',
            data: []
          },
          {
            name: '总订单',
            type: 'line',
            stack: '总量',
            data: []
          }
        ]
      }
      option.xAxis.data = this.datas.xData
      option.series[0].data = this.datas.amountData
      option.series[1].data = this.datas.orderData

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    async getdata() {
      const data = await dashData()
      this.datas = data
      // 给首页卡片设置数据
      this.list.forEach(item => {
        item.count = data[item.name]
      })
      this.getline()
      console.log(this.datas)
    }
  }
}
</script>

<style lang="less" scoped>
.el-row {
  display: flex;
  justify-content: space-around;
  .el-col {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    align-items: center;
    border-radius: 10px;

    margin: 15px;
    i {
      font-size: 30px;
    }
    .right-box {
      text-align: center;
      h3 {
        font-weight: normal;
      }
      p {
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 20px 10px;
}
</style>
